<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> 
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

<title>注册</title>
<style>
 body{
  background: #65cea7 url("image/login-bg.jpg") no-repeat fixed;
 }
 .form-sigin{
    max-width:330px;
    margin:100px auto;
    background:#fff;
    border-radius:5px;
 }
 .form-sigin-heading{
  padding:25px 15px;
  position:relative;
 }
 .form-sigin-heading .sign-title{
  position:absolute;
  top:-60px;
  left:0px;
  width:100%;
  color:#fff;
  text-transform:uppercase;
  font-size:24px;
 }
 
 .login-wrap{
  padding:20px;
  position:relative;
  
 }
 .login-wrap p{
  text-align:left;
  font-size:16px;
  color:#b6b6b6;
  }
  .login-wrap input[type="telephone"], .login-wrap input[type="password"], .login-wrap input[type="text"]{
   width:90%;
   margin-bottom:0px;
   background:#eaeaec;
   border-radius:5px;
   padding:10px 5px;
   border:1px solid #ccc;
  }
 
  label{
   display:inline-block;
   float:left;
   width:50%;
   
  }

  .btn-sigin{
   background:#6bc5a4;
   font-size:30px;
   color:#fff;
   width:94%;
   padding:10px 5px;
   margin-top:20px;
  }
  .registration{
   color:#c7c7c7;
   text-align:center;
   margin-top:15px;
  }
  .registration a{
  color:  #6bc5a4;
  }
  .header ul li{
   list-style:none;
   float:left;
   width:50%;
   text-align:center;
   
  }
  .header ul li a{
   text-decoration:none;
   color:#000;
  }

  .header{
   height:44px;
   
  }
  .content span{
   color:red;
  }
  #attach1,#attach2{
   font-size:10px;
   height:20px;
   padding:0px;
   margin-top:0px;
   color:red;
   margin-left:5px;
   
  }



</style>
</head>
<body>
<div class="login-body">
 <div class="container">
  <form class="form-sigin" action="<%=request.getContextPath()%>/sigin?method=" name="form1" onsubmit="return check()" method="post">
   <div class="form-sigin-heading text-center">
    <h1 class="sign-title">resistration</h1>
    <img src="image/login-logo.png">
   </div>
   
   <div class="login-wrap">
    <div class="header">
     <ul>
      <li id="way1"><a href="#">微信注册</a></li>
      <li id="way2"><a href="#">普通注册</a></li>
     </ul>
    </div>
    <div class="content">
     <div class="way1" style="display:none">
      <div><span>*</span><input type="text" autofocus="" placeholder="手机号" class="form-control"></div>
      <div><span>*</span><input type="text" autofocus="" placeholder="密码" class="form-control"></div>
      <div><span></span><input type="text" autofocus="" placeholder="邀请码" class="form-control"></div>
      <div><button type="submit" class="btn btn-lg btn-sigin"><i class="icon-ok"></i>注册</button></div>
     </div>
     <div class="way2" style="display:block">
	 <div><span>*</span><input type="telephone" placeholder="手机号"  name="phone" class="form-control"></div>
	 <div id="attach1" style="font-size:12px" ></div>
	 <div><span>*</span><input type="telephone" placeholder="手机验证码"  name="phone" class="form-control"></div>
	 <div id="attach1" style="font-size:12px" ></div>
     <div><span>*</span><input type="password" placeholder="密码" name="pwd" class="form-control"></div>
     <div id="attach2"></div> 
      <div><span></span><input type="text" style="margin-left:5px" autofocus="" placeholder="邀请码(推介人id)" class="form-control"></div>
      <div><button type="submit" style="margin-left:5px" class="btn btn-lg btn-sigin"><i class="icon-ok"></i>注册</button></div>
     </div>
    </div>
    <div class="registration">
     Already resistration
     <a href="2.html">login</a> 
    </div>
   </div>
  </form>
 </div>
</div>
<script src="js/jquery.min.js"></script>  
<script>
 $("#way1").click(function(){
	$("#way1 > a").css("color","red");
	$("#way2 > a").css("color","black")
	$(".way1").css("display","block");
	$(".way2").css("display","none");
	
 });
 $("#way2").click(function(){
	 $("#way1 > a").css("color","black");
	 $("#way2 > a").css("color","red")
	 $(".way2").css("display","block");
	 $(".way1").css("display","none");
 });
 
  $("input[name='phone']").blur(function(){
	 if(form1.phone.value==""||form1.phone.value==null){
		 $("#attach1").append("该项不能为空");
		 return;
	 }
	 if(form1.phone.value.length!=11){
		 $("#attach1").append("请检查用户名格式");
	 }
   });
  $("input[name='phone']").focus(function(){
	 $('#attach1').empty(); 
	 $("#attach2").empty(); 

  });

   $("input[name='pwd']").blur(function(){
	  if(form1.pwd.value==""){
		  $("#attach2").append("该项不能为空");
		  return
	  } 
	  if(form1.pwd.value.length<6){
		  $("#attach2").append("密码长度不低于6位");
	  }
   });
   $("input[name='pwd']").focus(function(){
	 $("#attach2").empty(); 
	 $("#attach1").empty(); 

   });
   
   function check(){
	   if(form1.phone.value==""){
		   $("#attach1").empty();
		   $("#attach1").append("该项不能为空");
		   return false;
	   }
	   if(form1.pwd.value==""){
		   $("attach2").empty();
		   $("#attach2").append("该项不能为空");
		   return false;
	   }
	   return true;
   }

</script>

</body>
</html>